import Vue from 'vue'
import Component from 'vue-class-component'
import TopicItemClass from './topicItem'
import './topicStyle.css'
import register from '../../store/register'
import {TopicStore} from './store'
import SearchHeadClass from '@/components/searchHeadView.js'
import BlankPageClass from '@/components/blankPage.js'
import VueScroller from '@/components/VueScroller.vue'

register('topic', TopicStore)

@Component
export default class TopicClass extends Vue {
  loading = false
  wrapperHeight = 0
  items = []
  word = ''
  currentPage = 1
  noData = false

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 64
  }

  mounted() {

    // for (let i = 1; i <= 30; i++) {
    //   this.list.push(i)
    // }
  }

  activated() {
    console.log(this.items)
    if(!this.items || this.items.length <= 0) {
      this.reloadTopics()
    }
  }

  getParameters() {
    let params = {}
    params['pageSize'] = 10
    params['pageIndex'] = this.currentPage
    params['word'] = this.word
    return params
  }

  findTopics(pageIndex = 1) {
    let params = this.getParameters()
    params['pageIndex'] = pageIndex
    return this.$axios.post('/topic/v1/topics', params)
      .then(response => {
        if (response.status === 0) {
          if (pageIndex === 1) {
            this.items = []
          }
          return response.data.topics
        }
      })
  }

  reloadTopics() {
    this.currentPage = 1
    this.$refs.vueScrollerTopic.$el.scrollTop = 0
    this.findTopics(this.currentPage).then(topics => {

      if (topics) {
        this.items = [...this.items, ...topics]
      }
      this.showNodata()
    }).catch(() => {
      this.noData = true
    })
  }

  infiniteHandler($state) {
    this.findTopics(this.currentPage++).then(topics => {
      $state.loaded()
      if (topics) {
        this.items = [...this.items, ...topics]
        if (topics.length < 10) {
          $state.complete()
        }
      } else {
        $state.complete()
      }
      this.showNodata()
    }).catch(() => {
      $state.complete()
    })
  }

  showNodata() {
    if (!this.items || this.items.length <= 0) {
      this.noData = true
    } else {
      this.noData = false
    }
  }

  handleSearch (value) {
    this.word = value
    this.reloadTopics()
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  createItems() {
    if (!this.items || this.items.length <= 0) {
      return
    }
    const item = this.items.map((value, index) => {
      return <TopicItemClass itemValue={this.items[index]}></TopicItemClass>
    })
    return item
  }

  handlerPop() {
    this.word = ''
    this.items = []
    this.$router.push({name: 'setting'})
  }

  render() {
    return (
      <div class="content">
        <SearchHeadClass
          onClickLeft={this.handlerPop}
          onClickRight={() => { this.$router.push({name: 'AddTopic', params: {id: '0'}}) }}
          leftIcon = 'backIcon'
          rightIcon ='addIcon'
          onValueChange = {value => { this.handleSearch(value) }}
          value= {this.word}
          placeholder='搜索专题'>
        </SearchHeadClass>

        <BlankPageClass onRefresh={this.reloadTopics} v-show={this.noData}></BlankPageClass>
        <VueScroller v-show={!this.noData} ref='vueScrollerTopic' height={this.wrapperHeight} infinite={this.infiniteHandler} refresh={this.reloadTopics} style="margin-top:64px">
            {this.createItems()}
        </VueScroller>
      </div>
    )
  }
}
